<template>
    <div>
     <!-- 商品列表{{categoryId}} -->
    <!-- 头部区域 -->
    <div class="product-list-header" ref="listheader">
        <!-- 头部搜索 -->
        <header class="category-header wrap">
            <i class="iconfont icon-left" @click="goBack"></i>
            <div class="header-search">
                <i class="iconfont icon-search"></i>
                <input type="text" class="search-title" />
            </div>
            <i class="iconfont icon-More"></i>
        </header>
        <!-- 排序 -->
        <section class="select-menu">
            <div 
            :class="['select-item',{active:orderBy === 'default'}]"  
            @click="handDefault">默认排序</div>

            <div 
            :class="['select-item',{active:orderBy === 'price_asc'}]" 
            @click="handPriceAsc">升序
            <i class="iconfont icon-up1"></i></div>

            <div 
            :class="['select-item',{active:orderBy === 'price_desc'}]" 
            @click="handPriceDesc"> 降序
            <i class="iconfont icon-down1"></i></div>

            <div class="select-item">
                筛选
                <i class="iconfont icon-shaixuan"></i>
            </div>
        </section>
        
    </div>

    <!-- 商品列表 -->
    <!-- <section class="product-list">
        <div class="product-container">
          <van-pull-refresh ref="vanlist" v-model="isLoading" @refresh="onRefresh"> 
            <van-list
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
             @load="onLoad"
            >
            
            <van-card
            v-for="item in productList"
            :key="item.id"
            :num="item.stock"
            :price="item.price"
            :desc="item.subtitle"
            :title="item.name"
            :thumb="item.imageHost+item.mainImage"
            :origin-price="item.originalPrice" 
            @click="goDetail(item)"
            />
            
                        
            </van-list>
          </van-pull-refresh>

          
        </div>
    </section> -->

     <section class="product-list">
      <div class="product-container">
        <van-pull-refresh  ref="vanlist" v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- <div ref="vanlistcontent"> -->
              <van-card
                v-for="item in productList"
                :key="item.id"
                :num="item.stock"
                :price="item.price"
                :origin-price="item.originalPrice"
                :desc="item.subtitle"
                :title="item.name"
                :thumb="item.imageHost + item.mainImage"
                @click="pushDetail(item)"
              />
               

          </van-list>
        </van-pull-refresh>
      </div>
    </section>
    </div>
</template>

<script>
import {getProductList} from "../../api"
    export default {
       data() {
    return {
      productList: [],
      orderBy: "default",
      pageSize: 10,
      pageNum: 1,
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  components: {

  },
  methods: {
    pushDetail(item) {
      console.log('跳转详情');
      /*
        1. 手动拼接参数 给地址=>  path: '/detail?id' + item.id
      
        2. 通过 router.push 对象的属性 query: {id: item.id} 形式传递参数

        3. 注意 通过 params 属性传递参数 使用 name 名称匹配路由
      */ 
      this.$router.push({
        // path: '/detail/' + item.id, 
        // query: {id: item.id}
        name: 'Detail',
        params: {id: item.id}
      })
    },
    getProductData(params) {
      getProductList(params, (res) => {
        console.log(res);
        this.loading = false;
        if (res.data.list.length !== this.pageSize) {
          this.finished = true;
        }

        if (this.isLoading) {
          // 下拉刷新赋值新数据
          this.productList = res.data.list;
          this.isLoading = false;
          this.finished = false // 允许上拉加载
        } else {
          // 上拉加载更多 合并数据
          this.productList = this.productList.concat(res.data.list);
        }
      });
    },
    // 默认
    handDefault() {
      if (this.orderBy === "default") {
        return;
      }
      this.orderBy = "default";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 升序
    handPriceAsc() {
      this.orderBy = "price_asc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 降序
    handPriceDesc() {
      this.orderBy = "price_desc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    onLoad() {
      this.loading = true;
      console.log("上拉了一下");
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
    onRefresh() {
      this.isLoading = true;
      this.pageNum = 1;
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
      goBack(){
        this.$router.go(-1)
    },
       goDetail(id){
           this.$router.push('/product/' + id)
       }  
        
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
    //   //   window.screen.height 屏幕高度
      // console.dir(this.$refs.listheader.clientHeight); //头部高度
      // console.log(window.screen.height);
    //   //   console.log(this.$refs.vanlist.$el);

    //   // this.$refs.vanlist 组件对象
    //   // this.$refs.vanlist.$el 标签元素对象
    // console.log(this.$refs.vanlist.$el);
      this.$refs.vanlist.$el.style.height =
        window.screen.height - this.$refs.listheader.clientHeight + "px";
    
    // 触发下拉刷新 
      this.onRefresh()
    });
  },
    }




</script>
    
<style lang="scss" scoped>
@import '../../common/style/mixin';
.product-list-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;

        .category-header {
            @include fj;
            width: 100%;
            height: 100px;
            line-height: 100px;
            padding: 0 30px;
            @include boxSizing;
            font-size: 30px;
            color: #656771;
            z-index: 10000;

            &.active {
                background: $red;
            }

            .icon-left {
                font-size: 50px;
                font-weight: bold;
            }

            .header-search {
                display: flex;
                width: 76%;
                height: 40px;
                line-height: 40px;
                margin: 20px 0;
                padding: 10px 0;
                color: #232326;
                background: #f7f7f7;
                @include borderRadius(40px);

                .icon-search {
                    padding: 0 10px 0 40px;
                    font-size: 34px;
                }

                .search-title {
                    font-size: 24px;
                    color: #666;
                    background: #f7f7f7;
                }
            }

            .icon-More {
                font-size: 40px;
            }

            .search-btn {
                height: 70px;
                margin: 15px 0;
                line-height: 70px;
                padding: 0 10px;
                color: #fff;
                background: $red;
                @include borderRadius(10px);
            }
        }

        .select-menu {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 100px;
            background: #fff;

            .select-item {
                flex: 1;
                height: 100%;
                text-align: center;
                line-height: 100px;
                font-size: 30px;
                border-top: 1px solid #dcdcdc;
                border-bottom: 1px solid #dcdcdc;
                &.active{
                     color: $red;
                }

                .iconfont {
                    &.icon-down1 {
                        color: #999;
                        padding-left: 10px;
                        font-size: 22px;
                    }

                    &.icon-up1 {
                        @extend .icon-down1;
                        font-size: 34px;
                    }

                    &.icon-shaixuan {
                        @extend .icon-down1;
                        font-size: 28px;
                    }

                    &.active {
                        color: $red;
                    }
                }
            }
        }
    }

//商品展示样式
.product-list {
  width: 100%;
  .product-container {
    position: absolute;
    left: 0;
    top: 220px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: auto;
    .van-pull-refresh {
      overflow-y: scroll;
    }

  }
}
</style>